<template>
	<view class="content" :style="{'background':isLogin?'#EB6A58':'linear-gradient(180deg, #FCDAD5 34%, rgba(247,200,121,0.3) 100%)'}">
	<top :imgSrc="imgSrc"></top>
	
	<view class="userInf">
		<view class="userImg" :style="{'background':isLogin?'':'#fff'}">
			<image :src="avatarUrl" mode="widthFix" v-if="isLogin"></image>
			<text v-else @tap="loginApp">登录</text>
		</view>
		<view class="user">
			<view style="display: flex;align-items: center;justify-content: space-around;">
				<text class="userName">dooner</text>
				<view class="realName">
					<text v-if="isRealName && isLogin">已实名</text>
					<text v-else>未实名</text>
				</view>
			</view>			
			<text class="userId">ID:13119831030</text>
		</view>
	</view>
	
	<view class="infCard">
		<view class="card">
			<image src="../../static/img/icon-users.png" mode="widthFix"></image>
			管理乘车人
		</view>
		<view class="card" @tap="ToRealName">
			<image src="../../static/img/icon-identity-1.png" mode="widthFix" v-if="isLogin && isRealName"></image>
			<image src="../../static/img/icon-identity-0.png" mode="widthFix" v-else></image>
			实名验证
		</view>
	</view>
	
	<view class="set">
			<view @tap="toDiscounts">优惠券&发票</view>
			<view @tap="toMessageSet">信息设置</view>
			<view @tap="toAboutWe">关于我们</view>
	</view>
	</view>
</template>

<script>
import top from "../../components/top/top.vue"

	export default{
		data(){
			return{
				isRealName:true,
				isLogin:false,
				imgSrc:"",
				avatarUrl:"../../static/img/icon-users.png"
			}
		},
		components: {
			top,
		},
		onShow() {
			this.checkLogin()
			if(uni.getStorageSync('openid')){
				this.isLogin = true
				this.avatarUrl = uni.getStorageSync('avatarUrl')
				
			}
		},
		methods:{
			checkLogin(){
				if(this.isLogin){
					this.imgSrc = "../../static/img/Logo-ERoad-文字版-0.png"
				}else{
					this.imgSrc = "../../static/img/Logo-ERoad-文字版-1.png"
				}
			},
			// 跳转关于我们
			toAboutWe(){
				uni.navigateTo({
					url:'/pages/aboutWe/aboutWe'
				})
			},
			// 跳转信息设置页
			toMessageSet(){
				uni.navigateTo({
					url:'/pages/messageSet/messageSet'
				})
			},
			// 跳转优惠券与发票页面
			toDiscounts(){
				uni.navigateTo({
					url:'/pages/discounts/discounts'
				})
			},
			// 跳转实名验证页面
			ToRealName(){
				uni.navigateTo({
					url:'/pages/realName/realName'
				})
			},
			// 登录
			loginApp() {
				uni.getUserProfile({
					desc: '获取头像',
					success: (getUserProfileRes) => {
						this.isLogin = true;
						const avatarUrl = getUserProfileRes.userInfo.avatarUrl
						uni.setStorageSync('avatarUrl', avatarUrl)					
						this.avatarUrl = avatarUrl
						console.log(this.avatarUrl)
						uni.login({
							"provider": "weixin",
							"onlyAuthorize": true, // 微信登录仅请求授权认
							success: function(event) {
								const {
									code
								} = event
								uni.request({
									url: 'http://0bwh5wod67l4.ngrok.xiaomiqiu123.top/user/getWxInfo',
									method: "POST",
									data: {
										code: event.code,
										userAlias: getUserProfileRes.userInfo.nickName
									},
									success: (res) => {
										//获得token完成登录					
										const openid = res.data.data.openid
										const userId = res.data.data.userId
										console.log(res)
										uni.setStorageSync('openid', openid)
										uni.setStorageSync('userId',userId)
									}
								});
								//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
							},
							fail: function(err) {
								// 登录授权失败  
								// err.code是错误码
							}
						})
					}
				})	
			}
			
		}
	}
</script>

<style lang="scss">
	.content{
		width: 750rpx;
		height: 100%;
		
		.userInf{
			display: flex;
			margin-bottom: 40rpx;
			.userImg{
				margin: 36rpx 44rpx auto 60rpx;
				width: 160rpx;
				height: 160rpx;
				border-radius: 160rpx;
				text-align: center;
				image{
					width: 160rpx;
					border-radius: 160rpx;
				}
				text{
					font-size: 36rpx;
					color:#333;
					font-weight: bold;
					line-height: 160rpx;
				}
			}
			.user{
				color: #fff;
				font-family: Inter, Inter;
				margin-top: 56rpx;
				.userName{
					font-size: 48rpx;	
					font-weight: bold;
					margin-right: 32rpx;
				}
				.realName{
					width: 72rpx;
					height: 32rpx;
					line-height: 32rpx;
					text-align: center;
					font-size: 16rpx;
					background: #fff;
					color:  #EB6A58;
					border-radius: 24rpx;	
				}
				.userId{
					margin-top: 20rpx;
					font-size: 36rpx;
					line-height: 42rpx;
				}
			}			
		}
		
		.infCard{
			display: flex;
			align-items: center;
			width: 630rpx;
			height: 168rpx;
			margin: 0 auto;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(235,106,88,0.14);
			border-radius: 24rpx;
			box-sizing: border-box;
			.card{
				width: 50%;
				height: 168rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				font-family: Broadway, Broadway;
				font-weight: 400;
				color: #000000;
				image{
					width: 104rpx;
					margin-right: 20rpx;
				}
			}
			.card:nth-child(1){
				border-right:4rpx dashed #D9D9D9;
			}
		}
		.set{
			background: #fff;
			width: 750rpx;
			height: 778rpx;
			margin-top: -114rpx;
			border-radius: 25rpx 25rpx 0 0;
			padding-top: 163rpx;
			
			view{
				width: 622rpx;
				line-height: 98rpx;
				height: 98rpx;
				border-bottom: 2rpx solid #D9D9D9;
				margin: 0 auto;
			}
		}
	}
</style>